<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="statics/Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="statics/Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="statics/Css/style.css" />
    <script type="text/javascript" src="statics/Js/jquery.js"></script>
    <!-- <script type="text/javascript" src="statics/Js/jquery.sorted.js"></script> -->
    <script type="text/javascript" src="statics/Js/bootstrap.js"></script>
    <script type="text/javascript" src="statics/Js/ckform.js"></script>
    <script type="text/javascript" src="statics/Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>
    
     <script type="text/javascript">
     $(function () {
		$('#newNav').click(function(){
				window.location.href="addRole.do";
		 });
    });
	
     function editRole(va){
    	 location.href="editRole.do?rId="+va+"";
     }
	
    function checkall(){
			var alls=document.getElementsByName("check");
			var ch=document.getElementById("checkall");
			if(ch.checked){
				for(var i=0;i<alls.length;i++){
					alls[i].checked=true;	
				}	
			}else{
				for(var i=0;i<alls.length;i++){
					alls[i].checked=false;	
				}	
			}
		}
		function delAll(){
			var alls=document.getElementsByName("check");
			var ids=new Array();
			for(var i=0;i<alls.length;i++){
				if(alls[i].checked){
					ids.push(alls[i].value);
				}		
			}
			if(ids.length>0){
				if(confirm("确认删除?")){
					location.href="delrole.do?rId="+ids+"";
					return true;
				}else{
					return false;
				}
			}else{
				alert("请选中要删除的项");
			}
		}
		
		function delrole(va){
			var flag = confirm("确定删除吗?");
			if(flag){
				location.href = "delrole.do?rId="+va+"";
				return true;
			}else{
				return false;
			}
		}
    </script>   
    
</head>
<body>
<form class="form-inline definewidth m20" action="Roleindex.do" method="post">  
    角色名称：
    <input type="text" name="rName" id="rolename"class="abc input-default" placeholder="" value="">&nbsp;&nbsp;  
    <button type="submit" class="btn btn-primary">查询</button>
</form>
<table class="table table-bordered table-hover definewidth m10" >
    <thead>
    <tr>
    	<th width="5%"><input type="checkbox" id="checkall" onChange="checkall();"></th>
        <th>角色名称</th>
        <th>状态</th>
        <th width="10%">操作</th>
    </tr>
    </thead>
    	<c:forEach items="${Role }" var="role">
	     <tr>
         	<td style="vertical-align:middle;"><input type="checkbox" name="check" value="${role.rId }"></td>
            <td>${role.rName }</td>
            <td>
            	<c:if test="${role.rState==0 }">启用</c:if>
            	<c:if test="${role.rState==1 }">禁用</c:if>
            </td>
            <td>
            	<input type="submit" value="编辑" onclick='return editRole("${role.rId}")'/>&nbsp;&nbsp;&nbsp;
            	<input type="submit" value="删除" onclick='return delrole("${role.rId}")'/>
           	</td>
        </tr>
        </c:forEach>
     </table>
        
        
   <table class="table table-bordered table-hover definewidth m10" >
  	<tr>
  		<th colspan="5">
		  <div class="inline pull-right page">
		         10122 条记录 1/507 页  
		         <a href='#'>下一页</a>
				<span class='current'>1</span>
				<a href='#'>2</a>
				<a href='/chinapost/index.php?m=Label&a=index&p=3'>3</a>
				<a href='#'>4</a><a href='#'>5</a>  
				<a href='#' >下5页</a> 
				<a href='#' >最后一页</a>
			</div>
			<div>
				<button type="button" class="btn btn-success" id="newNav">添加角色 </button>&nbsp;&nbsp;&nbsp;
				<button type="button" class="btn btn-success" id="delPro" onClick="delAll();">删除选中</button>
			</div>
		</th>
	</tr>
  </table>     
 </body>
</html>